import "./index.scss"
import { Row, Col, Typography, Tabs, Form, Input, Button, Checkbox, message } from "antd"
import { useRef } from "react"
import { UserOutlined, LockOutlined, AppstoreOutlined, PhoneOutlined } from '@ant-design/icons';
import { reg } from "../../utils/validate"
import { common } from "../../utils";
import { $http } from "../../api"
const { Title } = Typography;
const { TabPane } = Tabs;
const { pwd, account, phone } = reg;
const layout = {
    labelCol: {
        span: 6,
        offset: 1
    },
    wrapperCol: {
        span: 16
    }
}
const tailLayout = {
    wrapperCol: {
        span: 16,
        offset: 7
    }
}
export default function Register({ history, match }) {
    const form = useRef()
    const dbpass = useRef()
    const onFinish = (value) => {
        console.log(value);
        if (value.password != value.dbpassword) {
            message.error("两次密码不一致")
            dbpass.current.focus()
        } else {
            // ajax
            $http.register({
                ...value,
                role: 0
            }).then(res => {
                if (res.code == 200) {
                    // 跳转登录
                    history.push("/login?account=" + value.account)
                }
            })
        }
    }
    const onFailed = error => {
        message.error("请输入完整的注册数据")
    }
    return (
        <div className="login">
            <video
                className="myvideo"
                id="myvideo"
                autoPlay
                loop
                playsInline
                muted
                src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0122update-cs-video/service.mp4"
            ></video>

            <Row className="mybox  ">
                <Col className="login-box" xs={22} sm={18} md={14} lg={12} xl={6} xxl={4}>
                    <Title className="title" level={3}>
                        欢迎注册
                    </Title>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{    // 设置表单的初始值
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFailed}
                        ref={form}
                        {...layout}
                    >
                        <Form.Item
                            name="account"
                            label="用&ensp;户&ensp;名"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                        </Form.Item>

                        <Form.Item
                            name="phone"
                            label="手&ensp;机&ensp;号"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号',
                                },
                                {
                                    pattern: phone,
                                    message: "请输入正确的手机号码  "
                                }
                            ]}
                        >
                            <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                        </Form.Item>


                        <Form.Item
                            name="password"
                            label="登录密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入登录密码',
                                },
                                {
                                    pattern: pwd,
                                    message: '请输入6-16位数字加字母的登录密码',
                                },
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入登录密码" />
                        </Form.Item>

                        <Form.Item
                            name="dbpassword"
                            label="确认密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入确认密码',
                                },
                                {
                                    pattern: pwd,
                                    message: '请输入6-16位数字加字母的登录密码',
                                },
                            ]}
                        >
                            <Input.Password ref={dbpass} prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请确认登录密码" />
                        </Form.Item>

                        <Form.Item
                            {...tailLayout}
                        >
                            <Button block type="danger" htmlType="submit" >注册</Button>
                        </Form.Item>
                        <Form.Item
                            {...tailLayout}
                            className="links"
                        >
                            <span onClick={() => common.gotowhere(history, "/login")} style={{ color: "#f50" }}>已有账号,去登录</span>
                            <span onClick={() => common.gotowhere(history, "/forgetpass")} style={{ color: "#0f0" }}>忘记密码</span>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}